<template>
    <div class="count-seat">
        <div id='showorders' style='width:100%; min-height:680px'></div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, defineEmits, defineProps, watch, onMounted } from 'vue'
import { getSeatChart } from '../../../../../api/seat'
import * as echarts from 'echarts'
import dayjs from 'dayjs'

let seatChartVo: any[] = []
let seatList: any[] = []
// 日期
const dates = [
    dayjs().subtract(6, 'day').format("YYYY-MM-DD"),
    dayjs().subtract(5, 'day').format("YYYY-MM-DD"),
    dayjs().subtract(4, 'day').format("YYYY-MM-DD"),
    dayjs().subtract(3, 'day').format("YYYY-MM-DD"),
    dayjs().subtract(2, 'day').format("YYYY-MM-DD"),
    dayjs().subtract(1, 'day').format("YYYY-MM-DD"),
    dayjs().format("YYYY-MM-DD")
]
// 影院id
const cinemaId = JSON.parse(window.sessionStorage.getItem("currentUser")!).unitId

onMounted(() => {
    showorders()
})

const showorders = async () => {

    // 获取图表信息
    await getSeatChart({ dates: dates, cinemaId: cinemaId }).then((res: any) => {
        debugger
        if (res.code == 200) {
            seatChartVo = res.data.map((item: any) => {
                seatList.push(item.cinemaName)
                return {
                    name: item.cinemaName,
                    type: 'bar',
                    tooltip: {
                        valueFormatter: function (value: number) {
                            return value + ' %';
                        }
                    },
                    data: item.datas
                }
            })
            console.log(seatChartVo, seatList);
        }
    })

    // 基于准备好的dom，初始化echarts实例
    let chartDom = document.getElementById('showorders');
    let myChart = echarts.init(chartDom!);
    let option;

    option = {
        title: {
            text: '过去七天影厅入座率统计'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        toolbox: {
            feature: {
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        legend: {
            // data: ['影厅1号', '影厅2号', '影厅3号']
            data: seatList
        },
        xAxis: [
            {
                type: 'category',
                data: dates,
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '入座比例',
                min: 0,
                max: 100,
                interval: 10,
                axisLabel: {
                    formatter: '{value} %'
                }
            }
        ],
        series: seatChartVo
        // series: [
        //     {
        //         name: '影厅1号',
        //         type: 'bar',
        //         tooltip: {
        //             valueFormatter: function (value: number) {
        //                 return value + ' %';
        //             }
        //         },
        //         data: [
        //             20, 49, 70, 23, 25, 76, 35, 62, 32, 20, 64, 33
        //         ]
        //     },
        //     {
        //         name: '影厅2号',
        //         type: 'bar',
        //         tooltip: {
        //             valueFormatter: function (value: number) {
        //                 return value + '%';
        //             }
        //         },
        //         data: [
        //             30, 49, 54, 23, 25, 76, 35, 62, 32, 70, 64, 33
        //         ]
        //     },
        //     {
        //         name: '影厅3号',
        //         type: 'bar',
        //         tooltip: {
        //             valueFormatter: function (value: number) {
        //                 return value + '%';
        //             }
        //         },
        //         data: [
        //             40, 49, 54, 23, 63, 76, 35, 45, 57, 65, 80, 88
        //         ]
        //     },
        // ]
    };

    option && myChart.setOption(option);
}
</script>
<style lang='scss' scoped>

</style>